import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'

// 导入React useEffect页面渲染加载方法
import { useEffect } from 'react'
// 导入Redux中的useDispatch请求方法和useSelector获取数据方法
import { useDispatch, useSelector } from 'react-redux'
// 导入创建好倒异步获取商品列表方法
import { getFoodsListFunction } from './store/modules/takeaway'

import './App.scss'


const App = () => {
  // 创建Redux Dispatch函数
  const dispatch = useDispatch()

  // 触发useEffect加载获取商品列表
  useEffect(() => {
    // 使用异步调用方法
    dispatch(getFoodsListFunction())
    // 依赖项添加dispatch，确保只在dispatch变化时调用
  }, [dispatch])

  // 从Redux Store中获取商品列表
  const { foodsList,activeIndex } = useSelector(state => state.foods)
  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu foodsList={foodsList}/>

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map((item,index )=> {
                return (
                  activeIndex ===index &&<FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App
